<div class="graphone_editor">
	<div class="editor_view">
		<textarea id="codemirror_cypher"></textarea>
	</div>
	<ul class="controls list-inline">
		<li>
			<a ng-click="star()" 
				ng-mouseenter="hoveringStar=true" 
				ng-mouseleave="hoveringStar=false" 
				data-toggle="tooltip" 
				title="保存"
				data-placement="left" 
				ng-class="{'active': editorHasContent, 'sl-star-filled': hoveringStar}" 
				class="circled favorites sl sl-star-circle">
			</a>
		</li>
		<li>
			<a ng-click="clearContent()" 
				ng-mouseenter="hoveringDelete=true" 
				ng-mouseleave="hoveringDelete=false" 
				data-toggle="tooltip" 
				title="清除"
				data-placement="left" 
				ng-class="{'active': editorHasContent, 'sl-delete-filled': hoveringDelete}" 
				class="circled delete sl sl-delete-circle">
			</a>
		</li>
		<li>
			<a ng-click="execScript()" 
				ng-mouseenter="hoveringPlay=true" 
				ng-mouseleave="hoveringPlay=false" 
				data-toggle="tooltip" 
				title="执行"
				data-placement="left" 
				ng-class="{'active': editorHasContent, 'sl-play-filled': hoveringPlay}" 
				class="circled play sl sl-play">
			</a>
		</li>
	</ul>
</div>

<div class="frame">
	<!--outer Begin-->
	<div class="outer">
		<!--code-bar Begin-->
		<div class="code-bar">
			<ul class="actionsitems">
				<li class="clickitem dropdown" ng-show="showExportAndImport">
					<a tooltip-placement="bottom" tooltip="Inport file" class="dropdown-toggle" data-toggle="dropdown">
						<i class="fa fa-cloud-upload fa-fw"></i>
					</a>
					<ul class="dropdown-menu pull-right">
						<li>
							<div class="exportDiv">
								<input type="text" ng-model="import_file" class="form-control" placeholder="导出路径">
							</div>
							<a exportable ng-click="importFile()" class="btn btn-default importFile">导入</a>
							<!--
							<form role="form">
								<div class="form-group">
									<input type="file" id="import_file">
								</div>
							</form>
							<a exportable ng-click="importFile()" class="btn btn-default importFile">导入</a>
							-->
						</li>
					</ul>
				</li>
				<li class="clickitem dropdown" ng-show="showExportAndImport">
					<a tooltip-placement="bottom" tooltip="Export to file" class="dropdown-toggle" data-toggle="dropdown">
						<i class="fa fa-cloud-download fa-fw"></i>
					</a>
					<ul class="dropdown-menu pull-right">
						<li>
							<div class="exportDiv">
								<input type="text" ng-model="export_file" class="form-control" placeholder="导出路径">
							</div>
							<a exportable ng-click="exportFile()" class="btn btn-default importFile">导出</a>
						</li>
					</ul>
				</li>
				<!--
	        	<li class="clickitem">
	        		<a ng-click="frames.close(frame)" tooltip-placement="bottom" tooltip="Cancel and close">
	        			<i class="fa fa-times-circle fa-fw"></i>
	        		</a>
	        	</li>
	        	-->
	      	</ul>
	      	<div class="code_sql">
	      		<span>$</span>
	      		<span class="code mono" ng-click="copyToCode(codeText)">{{codeText}}</span>
	      	</div>
	    </div>
		<!--code-bar End-->
		<!--left-frame-toggle Begin-->
	    <div class="left-frame-toggle">
	      <div class="left-toggle-menu toggle">
	        <div class="btn-group toggle-buttons">
	          <div ng-show="showGraphBtn" ng-class="{active: isActive('graph')}" class="button-holder">
	            <button class="btn" ng-click="setActive('graph')"><i class="fa fa-code-fork fa-fw"></i><span class="mini-menu-item-text">Graph</span></button><br/>
	          </div>
	          <div ng-show="showRowsBtn" ng-class="{active: isActive('rows')}" class="button-holder">
	            <button class="btn" ng-click="setActive('rows')"><i class="fa fa-table fa-fw"></i><span class="mini-menu-item-text">Rows</span></button><br/>
	          </div>
	          <div ng-show="showTextBtn" ng-class="{active: isActive('text')}" class="button-holder">
	            <button class="btn" ng-click="setActive('text')"><i class="fa fa-font fa-fw"></i><span class="mini-menu-item-text">Text</span></button><br/>
	          </div>
	          <div ng-show="showErrorBtn" ng-class="{active: isActive('errors')}" class="button-holder">
	            <button class="btn" ng-click="setActive('errors')"><i class="fa fa-file-text-o fa-fw"></i><span class="mini-menu-item-text">Errors</span></button><br/>
	          </div>
	          <div class="button-holder ng-hide">
	            <button class="btn" ng-click="setActive('warn')"><i class="fa fa-exclamation-triangle fa-fw"></i><span class="mini-menu-item-text">Warn</span></button><br/>
	          </div>
	          <div ng-show="showCodeBtn" ng-class="{active: isActive('code')}" class="button-holder">
	            <button class="btn" ng-click="setActive('code')"><i class="fa fa-code fa-fw"></i><span class="mini-menu-item-text">Code</span></button>
	          </div>
	        </div>
	      </div>
	    </div>
	    <!--left-frame-toggle End-->
		


		<div class="right-inner-frame no-indicator">
	        <div class="view-result">
	        <!-- ========================graph========================== -->
	            <div ng-show="showChartContent" class="view-result-graph">
		          	<!--graph-holder Begin-->
		            <div class="graph-holder result">
						<div class="legend">
						    <div class="legend-row">
						    	<span ng-repeat="categorie in categories" 
						    	 ng-class="{'legendActive':legendActive==categorie.name&&twiceActive}" 
						    	 class="token token-label" ng-click="legendClick(categorie.name)">
						    		{{categorie.name}}<i class="count">({{categorie.num}})</i>
						    	</span>
						    </div>
						    <div class="legend-row" ng-show="hasLink">
						      <span ng-repeat="type in linktype" class="token token-relationship-type">
						      		{{type.type}}<i class="count">({{type.num}})</i>
						      </span>
						    </div>
						</div>
						<div class="graph-contents">
							<div class="graph" id="codeGraph"></div>
						</div>
		            </div>

		            <!--graph-holder End-->
		            <!--status-bar Begin-->
		            <div class="status-bar">
		              <div class="actionsitems">
		                <div class="inspector-footer">
		                  <span ng-show="showRes">Displaying {{nodeLeng}} nodes, {{linkLeng}} relationships</span>
		                </div>
		              </div>
		            </div>
		            <!--status-bar End-->
	            </div>
	            <!--view-result-graph End-->

				<!-- ========================table Begin========================== -->
				<div ng-show="showTableContent" class="view-result-table">
					<!--table-holder Begin-->
					<div class="table-holder result">
						<div id="normalTable"></div>
					</div>
					<!--table-holder End-->
					<!--status-bar Begin-->
					<div class="status-bar">
					  <div class="actionsitems">
					    <div class="inspector-footer">
					      <span>Returned {{row_num}} row in {{timeDiff}} ms</span>
					    </div>
					  </div>
					</div>
					<!--status-bar End-->
				</div>
				<!--view-result-table End-->
				<!-- ========================table End========================== -->

				<!-- ========================Text Begin========================== -->
				<div ng-show="showTextContent" class="view-result-text">
					<!--table-holder Begin-->
					<div class="table-holder result">
						<div id="asciiTable">
							<span ng-show="testShowText(nodes_created)">created {{nodes_created}} node ,</span>
							<span ng-show="testShowText(nodes_deleted)">deleted {{nodes_deleted}} node ,</span>
							<span ng-show="testShowText(properties_set)">set {{properties_set}} properties ,</span>
							<span ng-show="testShowText(relationships_created)">created {{relationships_created}} relationships ,</span>
							<span ng-show="testShowText(relationship_deleted)">deleted {{relationship_deleted}} relationship ,</span>
							<span ng-show="testShowText(labels_added)">added {{labels_added}} labels ,</span>
							<span ng-show="testShowText(labels_removed)">removed {{labels_removed}} labels ,</span>
							<span ng-show="testShowText(indexes_added)">added {{indexes_added}} indexes ,</span>
							<span ng-show="testShowText(indexes_removed)">removed {{indexes_removed}} indexes ,</span>
							<span ng-show="testShowText(constraints_added)">added {{constraints_added}} constraints ,</span>
							<span ng-show="testShowText(constraints_removed)">removed {{constraints_removed}} constraints ,</span>
							<span>statement executed in {{timeDiff}} ms.</span>
						</div>
					</div>
					<!--table-holder End-->
					<!--status-bar Begin-->
					<div class="status-bar">
					  <div class="actionsitems">
					    <div class="inspector-footer">
					      <span>Returned {{row_num}} row in {{timeDiff}} ms</span>
					    </div>
					  </div>
					</div>
					<!--status-bar End-->
				</div>
				<!--view-result-text End-->
				<!-- ========================Text End========================== -->

				<!-- ========================errors Begin========================== -->
				<div ng-show="showErrorsContent" class="view-result-text">
					<!--table-holder Begin-->
					<div class="table-holder result">
						<div class="errorMessage">{{errorsMessage}}</div>
					</div>
					<!--table-holder End-->
					<!--status-bar Begin-->
					<div class="status-bar">
					  <div class="actionsitems">
					    <div class="inspector-footer">
					      <span class="errorCode">
					      	<i class="fa fa-exclamation-triangle"></i>
					      	{{errorsCode}}
					      </span>
					    </div>
					  </div>
					</div>
					<!--status-bar End-->
				</div>
				<!--view-result-text End-->
				<!-- ========================errors End========================== -->

	
				<!-- ========================Code Begin========================== -->
				<div ng-show="showCodeContent" class="view-result-text">
					<!--table-holder Begin-->
					<div class="table-holder result">
						<div class="firstcode" ng-click="copyToCode(firstCode)">{{firstCode}}</div>
					</div>
					<!--table-holder End-->
					<!--status-bar Begin-->
					<div class="status-bar">
					  <div class="actionsitems">
					    <div class="inspector-footer">
					      <span>代码示例</span>
					    </div>
					  </div>
					</div>
					<!--status-bar End-->
				</div>
				<!--view-result-text End-->
				<!-- ========================Code End========================== -->


			</div>
			<!--view-result End-->
			</div>
		<!--right-inner-frame End-->
	</div>
	<!--outer End-->
</div>